{% extends "managersys/base/base_page.html" %}
{% load staticfiles %}
{% block content %}
    <div class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-warning text-center">
                                        <i class="ti-stats-up"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>读者</p>
                                       {{ reader_num }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-alert text-warning"></i> 读者
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-danger text-center">
                                        <i class="ti-receipt"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>借阅</p>
                                        {{ borrowed }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-tag text-warning"></i> 借阅量
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-success text-center">
                                        <i class="ti-money"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>罚款合计</p>
                                        {{ fine }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-calendar"></i> 罚款合计
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="content">
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="icon-big icon-info text-center">
                                        <i class="ti-twitter"></i>
                                    </div>
                                </div>
                                <div class="col-xs-7">
                                    <div class="numbers">
                                        <p>图书总量</p>
                                        {{ book_num }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="stats">
                                <i class="ti-reload"></i> 图书总量
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card" style="min-height: 350px">
                        <div class="header card-header-icon">
                            <h4 class="title"><i class="ti-pulse"></i> Sales Trend
                            </h4>
                        </div>
                        <div class="content">
                            <div class="chart-edge">
                                <div id="line-chart" class="demo-placeholder"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card card-circle-chart" data-background="color" data-color="orange"
                         style="min-height: 350px">
                        <div class="header text-center">
                            <h5 class="title">Customer Satisfaction</h5>
                            <p class="description">Last 30 days</p>
                        </div>
                        <div class="content">
                            <div id="chartNewVisitors" class="chart-circle" data-percent="95">95%</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="card card-circle-chart" data-background="color" data-color="brown"
                         style="min-height: 350px">
                        <div class="header text-center">
                            <h5 class="title">Conversion Rate</h5>
                            <p class="description">Last 30 days</p>
                        </div>
                        <div class="content">
                            <div id="chartSubscriptions" class="chart-circle" data-percent="9">9%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-12">
                    <div class="card" style="min-height: 485px">
                        <div class="header card-header-text">
                            <h4 class="title">Employees Stats</h4>
                            <p class="category">New employees on 15th December, 2016</p>
                        </div>
                        <div class="content table-responsive">
                            <table class="table table-hover">
                                <thead class="text-primary">
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Salary</th>
                                    <th>Country</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Bob Williams</td>
                                    <td>$23,566</td>
                                    <td>USA</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Mike Tyson</td>
                                    <td>$10,200</td>
                                    <td>Canada</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Tim Cook</td>
                                    <td>$32,190</td>
                                    <td>Netherlands</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Philip Morris</td>
                                    <td>$31,123</td>
                                    <td>UK</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Tom Hooper</td>
                                    <td>$23,789</td>
                                    <td>India</td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>Hulk Hogan</td>
                                    <td>$43,120</td>
                                    <td>Netherlands</td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>Angelina Jolie</td>
                                    <td>$12,140</td>
                                    <td>Australia</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="card" style="min-height: 485px">
                        <div class="header">
                            <h4 class="title">Task List</h4>
                        </div>
                        <div class="content">
                            <div class="table-full-width table-tasks">
                                <div id="task-actions" class="dropdown pull-right">
                                    <button type="button" class="btn btn-round btn-info dropdown-toggle"
                                            data-toggle="dropdown">
                                        <i class="ti-more"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        <li>
                                            <a href="#action">Action</a>
                                        </li>
                                        <li>
                                            <a href="#action">Another action</a>
                                        </li>
                                        <li>
                                            <a href="#here">Something else here</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="#link">Separated link</a>
                                        </li>
                                    </ul>
                                </div>
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td>
                                            <label class="checkbox">
                                                <input type="checkbox" value="" data-toggle="checkbox">
                                            </label>
                                        </td>
                                        <td>Create Annual Training Plan. Get it reviewed by Mike</td>
                                        <td class="td-actions text-right">
                                            <div class="table-icons">
                                                <button type="button" rel="tooltip" title="Edit Task"
                                                        class="btn btn-info btn-simple btn-xs">
                                                    <i class="ti-pencil-alt"></i>
                                                </button>
                                                <button type="button" rel="tooltip" title="Remove"
                                                        class="btn btn-danger btn-simple btn-xs">
                                                    <i class="ti-close"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="checkbox">
                                                <input type="checkbox" value="" data-toggle="checkbox" checked="">
                                            </label>
                                        </td>
                                        <td>Create Tutorials for Induction Training</td>
                                        <td class="td-actions text-right">
                                            <div class="table-icons">
                                                <button type="button" rel="tooltip" title="Edit Task"
                                                        class="btn btn-info btn-simple btn-xs">
                                                    <i class="ti-pencil-alt"></i>
                                                </button>
                                                <button type="button" rel="tooltip" title="Remove"
                                                        class="btn btn-danger btn-simple btn-xs">
                                                    <i class="ti-close"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="checkbox">
                                                <input type="checkbox" value="" data-toggle="checkbox">
                                            </label>
                                        </td>
                                        <td>Complete wireframe for HR Portal by end of December
                                        </td>
                                        <td class="td-actions text-right">
                                            <div class="table-icons">
                                                <button type="button" rel="tooltip" title="Edit Task"
                                                        class="btn btn-info btn-simple btn-xs">
                                                    <i class="ti-pencil-alt"></i>
                                                </button>
                                                <button type="button" rel="tooltip" title="Remove"
                                                        class="btn btn-danger btn-simple btn-xs">
                                                    <i class="ti-close"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label class="checkbox">
                                                <input type="checkbox" value="" data-toggle="checkbox">
                                            </label>
                                        </td>
                                        <td>Recruit five developers and get them trained on the new project</td>
                                        <td class="td-actions text-right">
                                            <div class="table-icons">
                                                <button type="button" rel="tooltip" title="Edit Task"
                                                        class="btn btn-info btn-simple btn-xs">
                                                    <i class="ti-pencil-alt"></i>
                                                </button>
                                                <button type="button" rel="tooltip" title="Remove"
                                                        class="btn btn-danger btn-simple btn-xs">
                                                    <i class="ti-close"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="card" style="min-height: 485px">
                        <div class="header">
                            <h4 class="title">Activities</h4>
                        </div>
                        <div class="content">
                            <div class="streamline">
                                <div class="sl-item sl-primary">
                                    <div class="sl-content">
                                        <small class="text-muted">5 mins ago</small>
                                        <p>Williams has just joined Project X</p>
                                    </div>
                                </div>
                                <div class="sl-item sl-danger">
                                    <div class="sl-content">
                                        <small class="text-muted">25 mins ago</small>
                                        <p>Jane has sent a request for access to the project folder</p>
                                    </div>
                                </div>
                                <div class="sl-item sl-success">
                                    <div class="sl-content">
                                        <small class="text-muted">40 mins ago</small>
                                        <p>Kate added you to her team</p>
                                    </div>
                                </div>
                                <div class="sl-item">
                                    <div class="sl-content">
                                        <small class="text-muted">45 minutes ago</small>
                                        <p>John has finished his task</p>
                                    </div>
                                </div>
                                <div class="sl-item sl-warning">
                                    <div class="sl-content">
                                        <small class="text-muted">55 mins ago</small>
                                        <p>Jim shared a folder with you</p>
                                    </div>
                                </div>
                                <div class="sl-item">
                                    <div class="sl-content">
                                        <small class="text-muted">60 minutes ago</small>
                                        <p>John has finished his task</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block pagescript %}
    <script type="text/javascript">
        $(document).ready(function () {

            {#demo.initVectorMap();#}
            {#demo.initCirclePercentage();#}

        });
    </script>
{% endblock %}

